<template>
  <div class="upload">
    <el-upload
      ref="upload"
      :limit="1"
      :action="action"
      list-type="picture-card"
      :data="{ path: path }"
      :auto-upload="true"
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-error="handleError"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      accept="image/png, image/jpeg"
      :close-on-click-modal="false"
      :name="name"
      :class="{ hide: hideCard, 'bg-color': bgColor }"
      class="img-upload"
    >
      <i slot="default" class="el-icon-plus" />
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="查看大图"
        append-to-body
        width="600px"
        :visible.sync="dialogVisible"
      >
        <div
          style="padding-bottom: 20px !important"
          :style="{ backgroundColor: bgColor }"
        >
          <img width="100%" :src="dialogImageUrl" alt="" />
        </div>
      </el-dialog>
    </el-upload>
    <div
      v-if="!fileList.length"
      class="upload-mask"
      @click="handleChoice"
    ></div>
    <explore
      ref="explore"
      :base-api="baseApi"
      @update-url="$emit('update', $event)"
    />
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import Explore from '../explore'
  export default {
    name: 'ImgUpload',
    components: {
      Explore,
    },
    props: {
      src: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: 'file',
      },
      baseApi: {
        type: String,
        required: true,
      },
      path: {
        type: String,
        required: true,
      },
      bgColor: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        action: `${this.baseApi}upload`,
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        hideCard: false,
      }
    },
    watch: {
      src(url) {
        if (this.src) {
          this.hideCard = true
          this.fileList = [{ url: `${this.src}` }]
        } else {
          this.hideCard = false
          this.fileList = []
        }
      },
    },

    mounted() {
      if (this.src) {
        this.hideCard = true
        this.fileList = [{ url: `${this.src}` }]
      }
    },
    methods: {
      handleChoice() {
        this.$confirm('请选择获取图片的方式', '获取图片', {
          confirmButtonText: '远程图片',
          cancelButtonText: '本地上传',
          type: 'info',
        })
          .then(() => {
            this.$refs.explore.showEdit()
          })
          .catch((e) => {
            this.$refs.upload.$children[1].handleClick()
          })
      },
      handleRemove(file, fileList) {
        this.$emit('update', '')
        this.hideCard = false
      },
      handleSuccess(response) {
        const { url } = response.data
        this.$emit('update', url)
        Message({ message: '上传完成!', type: 'success' })
        this.hideCard = true
      },
      handleError(err, file, fileList) {
        this.hideCard = false
        this.imgNum = this.imgNum + 1
        this.imgErrorNum = this.imgErrorNum + 1
        const message = `文件[${
          file.raw.name
        }]上传失败,文件大小为${this.$baseLodash.round(
          file.raw.size / 1024,
          0
        )}KB`
        Message({ message, type: 'error' })
        this.loading = false
        this.show = false
        console.log(err)
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
    },
  }
</script>

<style scoped>
  .upload {
    position: relative;
  }
  .upload-mask {
    width: 148px;
    height: 148px;
    left: 0;
    top: 0;
    position: absolute;
  }
  .hide >>> .el-upload.el-upload--picture-card {
    display: none;
  }

  .img-upload >>> .el-upload-list--picture-card .el-upload-list__item {
    transform: none !important;
    transition: none !important;
  }

  .bg-color >>> .el-upload-list--picture-card .el-upload-list__item {
    background-color: rgba(0, 0, 0, 0.3);
  }
</style>
